<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script type="text/javascript" src="static/admin/js/vue.min.js"></script>
    <title>form</title>
    <style type="text/css">
        #table table {
            width: 100%;
            font-size: 14px;
            border: 1px solid #eee
        }
        #table {
            padding: 0 10px;
        }
        table thead th {
            background: #f5f5f5;
            padding: 10px;
            text-align: left;
        }
        table tbody td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #eee;
            border-right: 1px solid #eee;
        }
        table tbody td span {
            margin: 0 10px;
            cursor: pointer;
        }
        .delete {
            color: red;
        }
        .edit {
            color: #008cd5;
        }
        .add {
            border: 1px solid #eee;
            margin: 10px 0;
            padding: 15px;
        }
        input {
            border: 1px solid #ccc;
            padding: 6px;
            border-radius: 3px;
            margin-right: 15px;
        }
        select{
            border: 1px solid #ccc;
            padding: 6px;
            border-radius: 3px;
            margin-right: 15px;
        }
        button {
            background: #008cd5;
            border: 0;
            padding: 4px 15px;
            border-radius: 3px;
            color: #fff;
        }
        #mask {
            background: rgba(0, 0, 0, .5);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 4;
            top: 0;
            left: 0;
        }
        .mask {
            width: 300px;
            height: 350px;
            background: rgba(255, 255, 255, 1);
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 47;
            border-radius: 5px;
        }
        .title {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .title span {
            float: right;
            cursor: pointer;
        }

        .content {
            padding: 10px;
        }

        .content input {
            width: 270px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>

<div id="table">

    <div class="add">
        <div>
            <select v-model="formObj.community_id" name="community_id" >
                <option disabled value="" >开票小区</option>
                {foreach $communitylist as $comm}
                <option value="{$comm.community_id}">{$comm.community_name}</option>
                {/foreach}
            </select>
        </div>

        <input type="text" v-model="formObj.buyerName" name="buyerName" value="" placeholder="购方名称(必填)" />
        <input type="text" v-model="formObj.buyerTaxNum" name="buyerTaxNum" value="" placeholder="购方税号" />
        <input type="text" v-model="formObj.buyerAddress" name="buyerAddress" value="" placeholder="购方地址" />


        <input type="text" v-model="formObj.buyerPhone" name="buyerPhone" value="" placeholder="推送手机(必填)" />
        <input type="text" v-model="formObj.buyerTel" name="buyerTel" value="" placeholder="购方电话" />
        <input type="text" v-model="formObj.buyerBank" name="buyerBank" value="" placeholder="开户行" />


        <input type="text" v-model="formObj.buyerAccount" name="buyerAccount" value="" placeholder="开户账号" />


    </div>
    <div class="add">


        <input type="text" v-model="addDetail.goodsName" name="goodsName" value="" placeholder="*简称*货物或应税劳务、服务名称" />
        <input type="text" v-model="addDetail.specType" name="specType" value="" placeholder="规格型号" />
        <input type="text" v-model="addDetail.unit" name="unit" value="" placeholder="单位" />
        <input type="number" v-model="addDetail.num" name="num" value="" placeholder="数量" />
        <input type="text" v-model="addDetail.price" name="price" value="" placeholder="单价" />
        <select v-model="addDetail.taxRate" name="taxRate">
            <option  value="">税率</option>
            <option value="0.01">1%</option>
            <option value="0.02">2%</option>
            <option value="0.03">3%</option>
            <option value="0.04">4%</option>
            <option value="0.05">5%</option>
            <option value="0.06">6%</option>
            <option value="0.07">7%</option>
            <option value="0.08">8%</option>
            <option value="0.09">9%</option>
            <option value="0.10">10%</option>
            <option value="0.11">11%</option>
            <option value="0.12">12%</option>
            <option value="0.13">13%</option>
            <option value="0.14">14%</option>
            <option value="0.15">15%</option>
            <option value="0.16">16%</option>
            <option value="0.17">17%</option>
            {/foreach}
        </select>


        <button @click="adddetail" style="font-size:24px">+</button>
    </div>
    <table cellpadding="0" cellspacing="0">
        <thead>
        <tr>
            <th>商品名称</th>
            <th>规格型号</th>
            <th>单位</th>
            <th>数量</th>
            <th>单价</th>
            <th>税率</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in formObj.invoiceDetails">

            <td>{{item.goodsName}}</td>
            <td width="10%">{{item.specType}}</td>
            <td width="10%">{{item.unit}}</td>
            <td width="10%">{{item.num}}</td>
            <td width="10%">{{item.price}}</td>
            <td width="10%">{{item.taxRate}}</td>

            <td width="18%"><span @click="deletelist(index)" class="delete">删除</span><span class="edit" @click="edit(item,index)">编辑</span></td>
        </tr>
        </tbody>
    </table>
    <div id="mask" v-if="editlist">
        <div class="mask">
            <div class="title">
                编辑
                <span @click="editlist=false">
								X
							</span>
            </div>
            <div class="content">
                <input type="text" v-model="editDetail.goodsName" name="goodsName" value="" placeholder="商品名称" required/>
                <input type="text" v-model="editDetail.specType" name="specType" value="" placeholder="规格型号" required/>
                <input type="text" v-model="editDetail.unit" name="unit" value="" placeholder="单位" required/>
                <input type="text" v-model="editDetail.num" name="num" value="" placeholder="数量" required/>
                <input type="text" v-model="editDetail.price" name="price" value="" placeholder="单价" required/>

                <select v-model="editDetail.taxRate" name="taxRate">
                    <option  value="">税率</option>
                    <option value="0.01" >1%</option>
                    <option value="0.02">2%</option>
                    <option value="0.03">3%</option>
                    <option value="0.04">4%</option>
                    <option value="0.05">5%</option>
                    <option value="0.06">6%</option>
                    <option value="0.07">7%</option>
                    <option value="0.08">8%</option>
                    <option value="0.09">9%</option>
                    <option value="0.10">10%</option>
                    <option value="0.11">11%</option>
                    <option value="0.12">12%</option>
                    <option value="0.13">13%</option>
                    <option value="0.14">14%</option>
                    <option value="0.15">15%</option>
                    <option value="0.16">16%</option>
                    <option value="0.17">17%</option>
                    {/foreach}
                </select>
                <button @click="update">更新</button>
                <button @click="editlist=false">取消</button>
            </div>
        </div>
    </div>
    <div style="text-align: center;margin-top: 20px">
        <button   @click="submit" style="font-size:16px">保存开票资料</button>
    </div>
</div>


<script src="static/admin/js/jquery.min.js"></script>
<script>
    console.log({$str});
    var app = new Vue({
        el: '#table',
        data: {
            addDetail: {
                taxRate:""
            },
            editlist: false,
            editDetail: {},


            formObj:{
                invoicedirect_id:"{$invoiceinfo.id}",
                community_id:"{$invoiceinfo.community_id}",
                buyerName:"{$invoiceinfo.buyerName}",
                buyerPhone:"{$invoiceinfo.buyerPhone}",
                buyerTaxNum:"{$invoiceinfo.buyerTaxNum}",
                buyerTel:"{$invoiceinfo.buyerTel}",
                buyerAddress:"{$invoiceinfo.buyerAddress}",
                buyerAccount:"{$invoiceinfo.buyerAccount}",
                invoiceDetails: [{$str}],

            },
            editid:''
        },
        computed:{
            verify:function () {
                if(this.formObj.community_id==""){
                    return {"flag":false,"msg":'请选择小区'};
                }
                if(this.formObj.buyerPhone==""){
                    return {"flag":false,"msg":'请填写用户手机'};
                }
                if(this.formObj.buyerName==""){
                    return {"flag":false,"msg":'请填写购方名称'};
                }

                return {"flag":true,"msg":'ok'};
            }
        },
        methods: {

            //新增
            adddetail() {
                //这里的思路应该是把this.addDetail传给服务端，然后加载列表this.newsList
                //this.formObj.newsList.push(this.addDetail)
                if(!this.addDetail.goodsName||this.addDetail.goodsName==""){
                    alert('请填写商品名称');
                    return false;
                }
                if(!this.addDetail.specType||this.addDetail.specType==""){
                    alert('请填写规格型号');
                    return false;
                }
                if(!this.addDetail.unit||this.addDetail.unit==""){
                    alert('请填写单位');
                    return false;
                }
                if(!this.addDetail.num||this.addDetail.num==""){
                    alert('请填写数量');
                    return false;
                }
                if(!this.addDetail.price||this.addDetail.price==""){
                    alert('请填写单价');
                    return false;
                }
                if(!this.addDetail.taxRate||this.addDetail.taxRate==""){
                    alert('请填写税率');
                    return false;
                }
                this.formObj.invoiceDetails.push({
                    goodsName:this.addDetail.goodsName,
                    specType: this.addDetail.specType,
                    unit: this.addDetail.unit,
                    num: this.addDetail.num,
                    price: this.addDetail.price,
                    taxRate: this.addDetail.taxRate

                })


            },
            //删除
            deletelist( i) {
                this.formObj.invoiceDetails.splice(i, 1);
                //这边可以传id给服务端进行删除  ID = id
                //axios.get('url',{ID:id}).then((res) =>{
                //			加载列表
                //})
            },
            //编辑
            edit(item,index) {
                console.log(index)
                this.editDetail = {
                    id:index,
                    goodsName: item.goodsName,
                    specType: item.specType,
                    unit: item.unit,
                    num: item.num,
                    price: item.price,
                    taxRate: item.taxRate
                }
                this.editlist = true
                this.editid = index

            },
            //确认更新
            update() {

                let _this= this

                if(_this.editDetail.goodsName==""){
                    alert('请填写商品名称');
                    return false;
                }
                if(_this.editDetail.specType==""){
                    alert('请填写规格型号');
                    return false;
                }
                if(_this.editDetail.unit==""){
                    alert('请填写单位');
                    return false;
                }
                if(_this.editDetail.num==""){
                    alert('请填写数量');
                    return false;
                }
                console.log(this)
                for(let i = 0; i < _this.formObj.invoiceDetails.length; i++) {
                    if(i ==this.editid) {
                        _this.formObj.invoiceDetails[i] = {

                            goodsName: _this.editDetail.goodsName,
                            specType: _this.editDetail.specType,
                            unit: _this.editDetail.unit,
                            num: _this.editDetail.num,
                            price: _this.editDetail.price,
                            taxRate: _this.editDetail.taxRate
                        }
                        this.editlist = false
                    }
                }
            },
            submit: function() {
                if(this.formObj.invoiceDetails.length=="0"){
                    alert('请填写开票内容');
                    return ;
                }
                console.log( this.formObj);
                let formData = JSON.stringify(this.formObj);
                console.log(formData);
                $.post("{:url('invoiceedit')}",{data:formData},function(res){
                    if(res.errorCode=="0"){
                        alert('修改成功');
                        window.parent.location.href="{:url('invoicelist')}";
                    }
                    console.log(res);
                },"json" )

            }
        }
    })
</script>
</body>

</html>